<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <link href="0327.css" type="text/css" rel="stylesheet"> -->
<style>
   
.ul li{
   height:139px;
   float:left;
   line-height: 19px; 
   text-align: center;
   padding:0 20px;
   cursor:pointer; 
   background-color: #B6F7EF;
}
   
</style>


</head>
<body>
   <div class="tab_list">
    	<ul class="ul">
       	<li id="current" class="goods">  
            <div class="item">商品</div>
            <div class="item">五金件</div>
            <div class="item">机械</div>
            <div class="item">食品</div>
         </li>

       	<li  class="order"> 
            <div class="item">订单</div>
            <div class="item">订单明细</div>
            <div class="item">追加订单</div>
            <div class="item">减去订单</div>
         </li>
         
         <li class="delivery" >
            <div class="item">出货</div>
            <div class="item">发货方法</div>
            <div class="item">物流公司</div>
            <div class="item">联系人</div>
         </li>
    	</ul>  
    </div> 



    <!-- <script src="0327.js"></script> -->
    <script>
    // 1. 获取元素。
var tab_list = document.querySelector('.ul');
var lis = tab_list.children;
// var lis = tab_list.querySelectorAll('li');



   for (var i=0; i< lis.length; i++){
      var items = lis[i].children;
      items[1].style.display = 'none';
      items[2].style.display = 'none';
      items[3].style.display = 'none';
      lis[i].onmouseover = function(){

         console.log(this.className);
         var item = this.children;
         item[1].style.display = 'block';
         item[2].style.display = 'block';
         item[3].style.display = 'block';
      }

      lis[i].onmouseout = function(){

         console.log(this.className);
         var item = this.children;
         item[1].style.display = 'none';
         item[2].style.display = 'none';
         item[3].style.display = 'none';
      }
      
   }
    </script>

</body>
</html>